<template>
    <div>
        <div id = "my_map" style="width: 300px;height: 300px;border: 1px solid red;margin: 30px;">
        </div>
        <div style="border: 1px solid red;width: 100px;height: 30px;" @click="addMarker">添加标记物</div>
        <div style="border: 1px solid red;width: 100px;height: 30px;" @click="move">移动</div>
        <div style="border: 1px solid red;width: 150px;height: 30px;" @click="initMarker">自定义标记物</div>
        <div style="border: 1px solid red;width: 150px;height: 30px;" @click="addConstomMarker">添加自定义标记物</div>

    </div>

</template>

<script>
import { MESSAGE_TYPE } from 'vue-baberrage'
const map  = {}
// 定义自定义覆盖物的构造函数
function SquareOverlay (center, length, color) {
    this._center = center;
    this._length = length;
    this._color = color;
}
export default {
    name: "DanMu",
    data(){
        return {
            msg: 'Hello vue-baberrage',
            barrageIsShow: true,
            currentId : 0,
            barrageLoop: false,
            barrageList: [],
            input: 'as1d21',
            map: {},
            arrFeatures: [],
            lat: 116.404,
            lng: 39.915,
            i: 0,
            squ : {}
        }
    },
    mounted() {
        // 创建地图实例
        this.map = new BMap.Map('my_map');
        // 创建点坐标
        var point = new BMap.Point(116.404, 39.915);
        // 初始化地图， 设置中心点坐标和地图级别
        this.map.centerAndZoom(point, 11);

        this.map.addControl(new BMap.ZoomControl());

        // 获取地图区域的边界
        var bounds = this.map.getBounds();
// 获取西南角的经纬度信息
        var sw = bounds.getSouthWest();
// 获取东北角的经纬度信息 东边的经度>西边的经度 北边的纬度>南边的纬度
        var ne = bounds.getNorthEast();

// lng为longitute 经度 lat为latitute纬度
        var lngSpan = ne.lng - sw.lng;
        var latSpan = ne.lat - sw.lat;
        this.arrFeatures = [];
        // 为海量覆盖物(新版Marker)添加监听
        this.map.addEventListener('massfeaturesclick', function (evt) {
            var massFeatures = evt.massFeatures;
            if (massFeatures.length > 0) {
                var feature = massFeatures[0];
                var name = feature.getData();
                var point = feature.getPosition();
                console.debug(name + ': ' + point.lng.toFixed(0) + ', ' + point.lat.toFixed(0))
            } else {
                console.debug("无覆盖物")
            }
        });
        // for (var i = 0; i < 50; i ++) {
        //     // 初始化位置
        //     var mpt = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7 + 0.15),
        //         sw.lat + latSpan * (Math.random() * 0.7 + 0.15));
        //     // 变换icon
        //     // var iconOffsetX = 42;
        //     // var iconOffsetY = 66;
        //
        //     var massFeature = new BMap.MassFeature(mpt, {data: 'MassFeature' + i});
        //     this.arrFeatures.push(massFeature);
        //     console.debug("add feature")
        // }
    },
    methods: {
        addMarker(){
            // 初始化位置
            var mpt = new BMap.Point(this.lat+this.i*0.05, this.lng);
            this.i++;
            // 变换icon
            // var iconOffsetX = 42;
            // var iconOffsetY = 66;

            var massFeature = new BMap.MassFeature(mpt, {data: 'MassFeature'});
            this.arrFeatures.push(massFeature);
            console.debug("add feature")
            this.map.addMassFeatures(this.arrFeatures);
        },
        move(){
          this.lat+=0.5
            this.map.addMassFeatures(this.arrFeatures);
        },
        addDanmu(){
            this.barrageList.push({
                id: ++this.currentId,
                avatar: "//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                msg: this.input,
                time: 5,
                barrageStyle: "blue",
                type: MESSAGE_TYPE.NORMAL,
            });
            console.debug("add Danmu")
        },

        initMarker(){

            // 继承API的BMap.Overlay
            SquareOverlay.prototype = new BMap.Overlay();
            // 实现初始化方法
            SquareOverlay.prototype.initialize = function (map) {
                // 保存map对象实例
                this._map = map;
                // 创建div元素，作为自定义覆盖物的容器
                var div = document.createElement("div");
                div.style.position = "absolute";
                // 可以根据参数设置元素外观
                div.style.width = this._length + "px";
                div.style.height = this._length + "px";
                div.style.background = this._color;
                div.style.border = '1px solid blue';
                // 将div添加到覆盖物容器中
                map.getPanes().markerPane.appendChild(div);
                // 保存div实例
                this._div = div;
                // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
                // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
                return div;
            }
            // 实现绘制方法
            SquareOverlay.prototype.draw = function () {
                // 根据地理坐标转换为像素坐标，并设置给容器
                var position = this._map.pointToOverlayPixel(this._center);
                this._div.style.left = position.x - this._length / 2 + "px";
                this._div.style.top = position.y - this._length / 2 + "px";
            }
            // 实现显示方法
            SquareOverlay.prototype.show = function() {
                if (this._div) {
                    this._div.style.display = "";
                }
            }
            // 实现隐藏方法
            SquareOverlay.prototype.hide = function() {
                if (this._div) {
                    this._div.style.display = "none";
                }
            }
            // 添加自定义方法
            SquareOverlay.prototype.toggle = function() {
                if (this._div) {
                    if (this._div.style.display == "") {
                        this.hide();
                    }
                    else {
                        this.show();
                    }
                }
            }
            // 添加自定义覆盖物
            // var mySquare = new SquareOverlay(this.map.getCenter(), 100, "red");
            // var mySquare1 = new SquareOverlay(this.map.getCenter(), 10, "blue");
            // this.map.addOverlay(mySquare);
            // this.map.addOverlay(mySquare1);
        },//initMarker end
        addConstomMarker(){
            // 添加自定义覆盖物
            var mySquare = new SquareOverlay(this.map.getCenter(), 10+this.i*5, "red");
            this.map.addOverlay(mySquare);
            this.i++
            console.debug("添加自定义标记物")
        }
    }
}
</script>

<style >
    .baberrage-stage{
        top: 20px;
        position: absolute;
        height: 300px !important;
        border: 1px solid red;
    }
    .blue{
        color: #61dafb;
        background: lawngreen;
        border-radius: 100px;
        padding: 0;
    }
    .baberrage-item{
        padding: 0px !important;
        background: lawngreen !important;

    }
    .baberrage-item .normal{
        background: lawngreen;
        background-color: lawngreen !important;
    }
    .baberrage-msg{
        color: #42b983;
    }
</style>